<template>

  <div class="common-layout">
  <el-container>
    <el-aside>
      <el-page-header  icon="el-icon-d-arrow-left" title="返回" @click="this.$router.back()"> </el-page-header>


      <el-row>
        <el-col :span="24">
          <router-link :to="{name:'CustomerInfo', params:{id: this.customerId}}">
            <el-button class="my_button" icon="el-icon-message" type="info">客户信息</el-button>
          </router-link>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <router-link :to="{name:'NotAnalyRecord', params:{id: this.customerId}}">
          <el-button
              class="my_button" icon="el-icon-data-line" type="info">未分析记录</el-button>
          </router-link>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <router-link :to="{name:'HistoryRecord', params:{id: this.customerId}}">
          <el-button
              class="my_button" icon="el-icon-timer" type="info">历史记录</el-button>
          </router-link>
        </el-col>
      </el-row>

    </el-aside>

    <el-main>
      <div class="content">

        <div class="information">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-button
                    class="my_button"
                    type="text"
                    icon="el-icon-user">
                  <div class="second-title">客户个人信息</div>
                </el-button>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <el-button
                    class="my_button"
                    type="success"
                    @click="exportCustomerInfo"
                >
                  <div class="export">导出客户信息</div>
                </el-button>
              </div>
            </el-col>
          </el-row>

          <!--客户信息-->
          <el-form label-width="100px"
                   :model="customer"
                   :rules="rules"
                   status-icon>
            <el-row>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item
                      label="姓名"
                      prop="name"
                  >
                    <el-col :span="8">
                      <el-input v-model="customer.name" disabled/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item label="籍贯" prop="nativePlace">
                    <el-col :span="8">
                      <el-input v-model="customer.nativePlace"/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item
                      label="性别">
                    <el-col :span="8">
                      <el-radio-group v-model="customer.gender">
                        <el-radio :label="0" disabled>男</el-radio>
                        <el-radio :label="1" disabled>女</el-radio>
                      </el-radio-group>
                       </el-col>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item label="现居" prop="address">
                    <el-col :span="8">
                      <el-input v-model="customer.address"/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item
                      label="出生"
                      prop="birthday"
                  >
                    <div class="block">
                      <el-date-picker v-model="customer.birthday" type="date" placeholder="选择你的生日" disabled>
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item
                      label="职业"
                      prop="professional"
                  >
                    <el-col :span="8">
                      <el-input v-model="customer.professional"/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item
                      label="电话" prop="phoneNum">
                    <el-col :span="8">
                      <el-input v-model="customer.phoneNum"/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="customer-form">
                  <el-form-item label="兴趣" prop="interest">
                    <el-col :span="8">
                      <el-input v-model="customer.interest"/>
                    </el-col>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

          </el-form>



          <!-- 家庭成员信息-->
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-button
                    class="my_button"
                    type="text"
                    icon="el-icon-user">
                  <div class="second-title">客户家庭情况</div>
                </el-button>
              </div>
            </el-col>
          </el-row>




          <el-table
              :data="familyNumberList"
              :header-cell-style="headClass"
              :cell-style="rowClass"
              style="width: 100%">
            <el-table-column prop="id" label="序号">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="成员姓名"/>
            <el-table-column prop="gender" label="性别">
              <template #default="scope">
                {{ scope.row.gender===0?'男':'女'}}
              </template>
            </el-table-column>
            <el-table-column prop="relationship" label="与客户关系"/>
            <el-table-column prop="phoneNum" label="联系电话" />
            <el-table-column align="right">
              <template #header #default="scope">
                操作
              </template>
              <template #default="scope">
                <el-button
                    class="my_button"
                    type="text"
                    @click="showFamilyNumber(scope.row.id)"
                    icon="el-icon-edit">
                  修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>


          <div>病史</div>
          <el-input
              v-model="customer.medicalHistory"
              :rows="4"
              type="textarea"
              placeholder="请输入..."
          />

        </div>


        <div class="description">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-button
                    class="my_button"
                    type="text"
                    icon="el-icon-edit">
                  <div class="first-title">客户描述</div>
                </el-button>
              </div>
            </el-col>
          </el-row>

          <el-input
              v-model="customer.description"
              :rows="4"
              type="textarea"
              placeholder="请输入..."
          />

          <!--单选框-->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <div>
                  <el-radio-group v-model="customer.sort">
                    <el-radio :label="15">重点客户</el-radio>
                    <el-radio :label="10">中等客户</el-radio>
                    <el-radio :label="5">普通客户</el-radio>
                  </el-radio-group>
                  </div>
              </div>
            </el-col>
          </el-row>



        </div>


        <el-row>
          <el-col :span="24">
            <div class="footer-button">
              <el-button
                  type="primary"
                  @click="updateCustomerInformation"
              >
                保存
              </el-button>
            </div>
          </el-col>
        </el-row>

      </div>

      <el-dialog title="录入家庭成员信息" v-model="moreVisible" width="30%">
        <el-form :model="familyNumber">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="familyNumber.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="familyNumber.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
            </el-form-item>
          <el-form-item label="与客户关系" :label-width="formLabelWidth">
            <el-input v-model="familyNumber.relationship" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="familyNumber.phoneNum" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="moreVisible = false">取消</el-button>
        <el-button type="primary" @click="editFamilyNumber"
        >确定</el-button
        >
      </span>
        </template>
      </el-dialog>


    </el-main>
  </el-container>
  </div>
</template>

<script>
import customer from "@/api/customer/customer";
import familyNumber from "@/api/familyNumber/familyNumber";
import exports from "@/api/util/exports";

export default {
  name: "ViewCustomer",
  data() {
    const validatePhoneNum = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (!reg.test(value)) {
        callback(new Error('手机号码不符合要求'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        professional: [
          { required: true, message: '请输入职业', trigger: 'blur'},
        ],
        phoneNum: [
          { required: true, message: '请输入电话', trigger: 'blur'},
          { validator: validatePhoneNum, trigger: "blur"}
        ],
      },
      moreVisible: false,
      selectGroupVisible: false,
      customer: {
        id: null,
        name: null,
        nativePlace: null,
        address: null,
        gender: null,
        birthday: null,
        professional: null,
        phoneNum: null,
        interest: null,
        medicalHistory: null,
        description: null,
        sort: null,
        userId: null,
        groupId: null,
      },
      familyNumber:{
        id: null,
        name: null,
        gender: null,
        relationship: null,
        phoneNum: null,
      },
      familyNumberList:[
      ],
      // 新建分组名称
      group: {
        groupName: null,
        userId: 3376322891317,
      },
      customerId: null,
      userId: null,
      groupId: null,
      formLabelWidth: '120px',
    }
  },
  created() {
    // 如果路由中有参数值则执行此方法
    if(this.$route.params && this.$route.params.id) {
      // 从路由中获取id值
      this.customerId = this.$route.params.id
      // 调用根据id查询的方法
      this.getCustomerInformation(this.customerId)
    }

    let user = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));
    this.userId = user.id;

  },
  watch: {  // 监听(解决路由切换问题)
    // 路由变化方式，路由发生变化即执行
    $route(to, from){
      this.getCustomerInformation();
    }
  },
  methods: {
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    // 导出客户信息
    exportCustomerInfo() {

      this.$confirm('此操作将导出该用户,是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = []
        let id = {}
        id.id = parseInt(this.customerId)
        array[0] = id
        array = {array}
        exports.exportCustomerInfo(array).then(response => {
          const content = response
          const blob = new Blob([content])
          const fileName = '客户信息.xlsx'
          if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }

          this.$message({
            type: 'success',
            message: '导出成功',
          })
        }).catch((response) => {
          console.log("error:" + response);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出',
        })
      })




    },
    // goBack() {
    //   this.$router.replace('/customer/show')
    // },
    // 得到客户信息
    getCustomerInformation(id) {
      customer.getCustomerInformation(id).then(response => {
        this.customer = response.data.item.customer;
        this.familyNumberList = response.data.item.familyNumbers;
      })
    },
    // 展示家庭成员信息
    showFamilyNumber(id) {
      this.familyNumber = this.familyNumberList.find(item=>item.id===id);
      this.moreVisible = true
    },
    // 修改家庭成员信息
    editFamilyNumber() {
      var index = this.familyNumberList.findIndex(item=>item.id===this.familyNumber.id)
      this.familyNumberList.splice(index, 1, this.familyNumber)
      this.familyNumber = {}
      this.moreVisible =false
    },
    // 修改客户信息
    updateCustomerInformation() {
      customer.updateCustomer(this.customer)
        .then((response) => {
          if(this.familyNumberList.length != 0) {
            familyNumber.updateFamilyNumbers(this.familyNumberList)
              .then((response) => {
                console.log(response.message);
              }).catch((response) => {
                console.log("error:" + response.message);
            })
          }
          this.$router.push("/customer/show")
        }).catch((response) => {
          console.log("error:" + response.message);
      })
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  width: 250px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.handle-box {
  margin: 20px 50px;
  /*border-style: dashed;*/
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 120px;
  display: inline-block;
  margin: 10px 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}
.my_table{
  margin: 0px 30px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.container {
  margin: 20px 400px;
}
.el-input {
  width: 180px;
}
#input-textarea {
  width: 300px;
}

#reset-btn {
  margin-right: 25px;
}
.important {
  color: red;
}

.content {
  border-style: outset;
}
.information {
  border-style: outset;
}
.description {
  border-style: outset;
}
.title {
  font-size: 30px;
  margin: 5px 500px;
}

.my_button{
  margin: 5px 30px;
  width: 180px;
  font-size: 16px
}
.first-title {
  font-size: 24px;
  color: black;
}
.second-title {
  font-size: 20px;
  color: red;
  text-align:center;
}

.export {
  text-align: center;
}

.footer-button {
  margin: 5px 600px;
}
</style>